<template>
  <div class="flex-1">
    <!-- title -->
    <div
      class="p-[0_20px] h-50px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
    >
      <span class="inline-block w4px h13px bg-#00a1d6 m-r-5px"></span>
      <span class="c-#00a1d6 text-14px">我的硬币</span>
    </div>

    <!-- label-item -->
    <div
      class="p-[0_20px] h-48px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
    >
      <div
        class="w-56px h-48px leading-48px c-#000 text-14px box-border cursor-pointer text-center relative"
        v-for="(item, index) in tabs"
        :class="[
          item.active && '!c-#00a1d6 b-b b-b-solid b-b-#00a1d6',
          index > 0 && 'm-l-38px',
        ]"
        @click="tabs.forEach((tab, i) => (tab.active = i === index))"
      >
        {{ item.label }}
        <div
          class="w-0 h-0 b-l-3 b-r-3 b-t-0 b-b-3 b-solid b-l-transparent b-r-transparent b-b-#00a1d6 absolute left-50% translate-x-[-50%] bottom-0px"
          v-if="item.active"
        ></div>
      </div>
    </div>

    <!-- label-content -> 首页 -->
    <div class="p20px flex justify-between" v-if="tabs[0].active">
      <div class="w-370px">
        <div class="text-18px fw-800">
          <span>硬币余额：</span>
          <span class="c-#00a1d7 m-l-5px">{{
            userStore.userInfo.balance
          }}</span>
        </div>
        <div class="m-t-20px text-12px">
          <span class="fw-800">硬币记录</span>
          <span class="c-#717171 m-l-20px">您最近一周的变化情况</span>
        </div>
        <el-table
          class="m-t-10px"
          :data="userCoinList"
          empty-text="没有积分记录哦( ゜- ゜)"
          :header-cell-style="{ 'background-color': '#e5e9ef' }"
          border
        >
          <el-table-column
            prop="createTime"
            label="时间"
            align="center"
            width="180"
          />
          <el-table-column prop="changeAmount" label="变化" align="center" />
          <el-table-column prop="changeType" label="原因" align="center" />
        </el-table>
        <div
          class="m-t-20px text-12px text-center bg-#f5f5f5 b b-solid b-#ddd b-rd-4px leading-32px cursor-pointer hover:bg-#ccd0d7"
          @click="tabs.forEach((tab, i) => (tab.active = i === 1))"
        >
          查看更多记录 >
        </div>
      </div>

      <div class="mt40px w-370px text-12px c-#717171">
        <span class="fw-800 c-#000">硬币有什么用?</span>
        <span class="float-right cursor-pointer c-#00a1d6">更多硬币帮助>></span>
        <p class="m-t-20px">硬币是bilibili世界中非常重要的物品</p>
        <li
          class="list-none before:content-['•'] before:text-blue-500 before:mr-4px before:text-4"
        >
          硬币用于对优秀的视频作品进行投币支持，这是对UP主的一种肯定
        </li>
        <li
          class="list-none before:content-['•'] before:text-blue-500 before:mr-4px before:text-4"
        >
          硬币还可用于修改昵称、购买标识、参与活动等
        </li>

        <p class="m-[20px_0] fw-800 c-#000">如何获得硬币?</p>
        <li
          class="list-none before:content-['•'] before:text-blue-500 before:mr-4px before:text-4"
        >
          会员等级=Lv0时，将无法获得硬币登录奖励
        </li>
        <li
          class="list-none before:content-['•'] before:text-blue-500 before:mr-4px before:text-4"
        >
          会员等级>=Lv1且绑定手机时，每天登录后可领取登录硬币奖励
        </li>
        <li
          class="list-none before:content-['•'] before:text-blue-500 before:mr-4px before:text-4"
        >
          UP主可通过投稿视频来获得更多硬币（观众投币的百分之十将作为UP主的硬币收入奖励）
        </li>
      </div>
    </div>

    <!-- label-content -> 硬币记录 -->
    <div class="p20px" v-if="tabs[1].active">
      <div class="text-12px">
        <span class="fw-800">硬币记录</span>
        <span class="c-#717171 m-l-20px">您最近一周的变化情况</span>
      </div>
      <el-table
        class="m-t-10px !b-[#000]"
        :data="userCoinList"
        empty-text="没有积分记录哦( ゜- ゜)"
        :header-cell-style="{ 'background-color': '#e5e9ef' }"
        border
      >
        <el-table-column
          prop="createTime"
          label="时间"
          align="center"
          width="180"
        />
        <el-table-column prop="changeAmount" label="变化" align="center" />
        <el-table-column prop="changeType" label="原因" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useUserStore } from "@/store/userStore";
import { listUserCoinLog as listUserCoinLogApi } from "@/api/coin";
import type { UserCoinLogVO } from "@/api/coin/types";
import { DateUtil } from "@/utils/dateUtil";

const userStore = useUserStore();

const userCoinList = ref<UserCoinLogVO[]>();

const tabs = ref([
  { label: "首页", active: true },
  { label: "硬币记录", active: false },
]);

onMounted(async () => {
  const res = await listUserCoinLogApi({
    createTime: DateUtil.format(
      DateUtil.addDays(new Date(), -7),
      "YYYY-MM-DD 00:00:00"
    ),
  });
  if (res) {
    userCoinList.value = res.rows;
  }
});
</script>

<style scoped></style>
